<template>
  <div>
    <DogDog
      v-for="(obj, index) in arr"
      :key="index"
      :imgurl="obj.dogImgUrl"
      :dogname="obj.dogName"
      @love="Lovefn"
    ></DogDog>

    <hr />
    <p>显示喜欢的狗:</p>
    <ul>
      <li v-for="(item, index) in loveArr" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import DogDog from '@/components/DogDog.vue'
export default {
  data() {
    return {
      // 1. 准备数据
      arr: [
        {
          dogImgUrl:"https://img30.360buyimg.com/popWareDetail/jfs/t1/118544/33/5149/61377/5eb2145aE47e482a5/795093a5cd36696b.jpg",
          dogName: "金毛",
        },
        {
          dogImgUrl:"https://img2.baidu.com/it/u=51640761,3810748840&fm=253&fmt=auto&app=138&f=JPEG?w=598&h=500",
          dogName: "茶杯犬",
        },
        {
          dogImgUrl:"https://img10.360buyimg.com/imgzone/jfs/t1/156880/20/17331/112814/60581b14Ef0f35484/e5072539ed35f919.jpg",
          dogName: "边牧",
        },
        {
          dogImgUrl:"https://img14.360buyimg.com/pop/jfs/t1/101644/35/29249/111413/6282430aE1203f509/97f63bd339b5f103.jpg",
          dogName: "比熊犬",
        },
        {
          dogImgUrl:"https://img13.360buyimg.com/imgzone/jfs/t1/210294/16/7095/166432/617a3336Ed9d38f7e/934fefadd6ceb445.jpg",
          dogName: "柯基",
        },
        {
          dogImgUrl:"https://img2.baidu.com/it/u=676657802,990322903&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          dogName: "萨摩耶犬",
        }
      ],
      loveArr: []
    };
  },
  components: {
    DogDog,
  },
  methods: {
    Lovefn(dogName) {
      this.loveArr.push(dogName)
    },
  },
};
</script>

<style >
</style> 